import React from 'react'
import type { MenuProps } from 'antd';
import { homeRoutes } from '@/router/router'
import { RouterList } from '@/type';
import { Menu } from 'antd';
import { NavLink } from 'react-router-dom'

const MainLeftMenu = () => {

    type MenuItem = Required<MenuProps>['items'][number];

    function getItem(
        label: React.ReactNode,
        key: React.Key,
        icon?: React.ReactNode,
        children?: MenuItem[],
        type?: 'group',
    ): MenuItem {
        return {
            key,
            icon,
            children,
            label,
            type,
        } as MenuItem;
    }

    const onClick: MenuProps['onClick'] = (e) => {
        console.log('click ', e);
    };

    const renderRouter = (arr: RouterList) => {
        let items: any = []
        arr && arr.map((item, index) => {
            items.push(
                getItem(<NavLink to={item.path}>{item.title}</NavLink>, index, <img src={item.icon} alt="icon" />)
            )
        })
        return items
    }


    return (
        <Menu
            onClick={onClick}
            style={{ width: '100%',height:'100%' }}
            defaultSelectedKeys={['0']}
            mode="inline"
            items={renderRouter(homeRoutes)}
        />
    )
}

export default MainLeftMenu